$(function() {

	// 初始化echarts柱状图实例
	var myChart = echarts.init(document.getElementById('echarts1'));
	// 指定图表的配置项和数据
	var option = {
		title : {
			text : '程序员年龄分布图'
		},
		tooltip : {},
		legend : {
			data : []
		},
		xAxis : {
			name : '年龄',
			data : []
		},
		yAxis : {
			name : '人数'
		},
		series : [ {
			name : '上海',
			type : 'bar',
			data : []
		}, {
			name : '北京',
			type : 'bar',
			data : []
		}, {
			name : '济南',
			type : 'bar',
			data : []
		} ]
	};
	myChart.setOption(option); //先把可选项注入myChart中
	myChart.hideLoading();//隐藏加载
	getChartData(myChart, 0);//ajax后台交互 ，0代表折线图或者柱状图

	//折线图
	var myChart = echarts.init(document.getElementById('echarts2'));
	var option = {
		title : {
			text : '程序员年龄分布图'
		},
		tooltip : {
			trigger : 'axis'
		},
		legend : {
			data : []
		},
		toolbox : {
			feature : {
				saveAsImage : {}
			}
		},
		xAxis : {
			type : 'category',
			name : '年龄',
			boundaryGap : false,
			data : []
		},
		yAxis : {
			type : 'value',
			name : '人数',
		},
		series : [ {
			name : '上海',
			type : 'line',
			data : []
		}, {
			name : '北京',
			type : 'line',
			data : []
		}, {
			name : '济南',
			type : 'line',
			data : []
		}

		]
	};
	myChart.setOption(option);
	myChart.hideLoading();//隐藏加载
	getChartData(myChart, 0);//ajax后台交互 ，0代表折线图或者柱状图     

	//环形图
	var myChart = echarts.init(document.getElementById('echarts3'));
	var option = {
		title : {
			text : '程序员分布',
			x : 'center'
		},
		tooltip : {
			trigger : 'item',
			formatter : "{a} <br/>{b}: {c} ({d}%)"
		},
		legend : {
			orient : 'vertical',
			x : 'left',
			data : []
		},
		series : [ {
			name : '程序员数量',
			type : 'pie',
			radius : [ '50%', '70%' ],
			avoidLabelOverlap : false,
			label : {
				normal : {
					show : false,
					position : 'center'
				},
				emphasis : {
					show : true,
					textStyle : {
						fontSize : '30',
						fontWeight : 'bold'
					}
				}
			},
			labelLine : {
				normal : {
					show : false
				}
			},
			data : []
		} ]
	};
	myChart.setOption(option); //先把可选项注入myChart中
	myChart.hideLoading();//隐藏加载
	getChartData(myChart, 1);//ajax后台交互  ，1饼形图

	//玫瑰饼形图
	var myChart = echarts.init(document.getElementById('echarts4'));
	var option = {
		backgroundColor : '#2c343c',

		title : {
			text : '程序员分布',
			subtext : '玫瑰饼形图实例',
			left : 'center',
			top : 20,
			textStyle : {
				color : '#ccc'
			}
		},
		legend : {
			orient : 'vertical',
			left : 'left',
			data : [],
			textStyle : {
				color : '#ccc'
			}
		},
		tooltip : {
			trigger : 'item',
			formatter : "{a} <br/>{b} : {c} ({d}%)"
		},
		visualMap : {
			show : false,
			min : 80,
			max : 600,
			inRange : {
				colorLightness : [ 0, 1 ]
			}
		},
		series : [ {
			name : '程序员数量',
			type : 'pie',
			radius : '55%',
			center : [ '50%', '50%' ],
			data : [].sort(function(a, b) {
				return a.value - b.value
			}),
			roseType : 'angle',
			label : {
				normal : {
					textStyle : {
						color : 'rgba(255, 255, 255, 0.3)'
					}
				}
			},
			labelLine : {
				normal : {
					lineStyle : {
						color : 'rgba(255, 255, 255, 0.3)'
					},
					smooth : 0.2,
					length : 10,
					length2 : 20
				}
			},
			itemStyle : {
				normal : {
					color : '#c23531',
					shadowBlur : 200,
					shadowColor : 'rgba(0, 0, 0, 0.5)'
				}
			}
		} ]
	};
	myChart.setOption(option); //先把可选项注入myChart中
	myChart.hideLoading();//隐藏加载
	getChartData(myChart, 1);//ajax后台交互  ，1饼形图

	//饼形图 
	var myChart = echarts.init(document.getElementById('echarts5'));
	var option = {
		title : {
			text : '程序员分布',
			subtext : '饼形图实例',
			x : 'center'
		},
		tooltip : {
			trigger : 'item',
			formatter : "{a} <br/>{b} : {c} ({d}%)"
		},
		legend : {
			orient : 'vertical',
			left : 'left',
			data : []
		},
		series : [ {
			name : '程序员数量',
			type : 'pie',
			radius : '55%',
			center : [ '50%', '60%' ],
			data : [],
			itemStyle : {
				emphasis : {
					shadowBlur : 10,
					shadowOffsetX : 0,
					shadowColor : 'rgba(0, 0, 0, 0.5)'
				}
			}
		} ]
	};
	myChart.setOption(option); //先把可选项注入myChart中
	myChart.hideLoading();//隐藏加载
	getChartData(myChart, 1);//ajax后台交互  ，1代表饼形图

	//折线图和柱状图混合
	var myChart = echarts.init(document.getElementById('echarts6'));
	var option = {
		title : {
			text : '程序员分布图',
		},
		tooltip : {
			trigger : 'axis'
		},
		legend : {
			data : []
		},
		toolbox : {
			show : true,
			feature : {
				saveAsImage : {}
			}
		},
		xAxis : [ {
			type : 'category',
			name : '年龄',
			data : []
		} ],
		yAxis : {
			type : 'value',
			name : '人数'
		},
		series : [ {
			name : '上海',
			type : 'bar',
			data : []
		}, {
			name : '北京',
			type : 'line',
			data : []
		}, {
			name : '济南',
			type : 'line',
			data : []
		} ]
	};
	myChart.setOption(option); //先把可选项注入myChart中
	myChart.hideLoading();//隐藏加载
	getChartData(myChart, 0);//ajax后台交互 ，0代表折线图或者柱状图

	//地图
	var chart = echarts.init(document.getElementById('echarts7'));
	chart.setOption({
		series : [ {
			type : 'map',
			map : 'china'
		} ]
	});

});

/**
 * 从后台获取echarts图表数据，填充到前端
 * @param 
 * 		myChart:初始化后的echarts图实例，  type：echarts图类型  1：饼形图，  0：非饼形图
 * @returns
 */
function getChartData(myChart, type) {
	var options = myChart.getOption();
	// 通过Ajax获取数据
	$.post("getChartData", {}, function(result) {
		if (result) {
			if (typeof (options.legend) != "undefined") {//legend存在时
				options.legend[0].data = result.legend;//为legend赋值
			}
			if (typeof (options.xAxis) != "undefined") {//xAxis存在时
				$.each(options.xAxis, function(i, val) {
					options.xAxis[i].data = result.category[i];//为xAxis赋值
				});
			}
			if (typeof (options.yAxis) != "undefined") {//yAxis存在时
				options.yAxis[0].data = result.yAxis;//为yAxis赋值
			}

			$.each(options.series, function(i, val) {////为图中的series赋值
				if (type == 0) {//折线图和柱状图
					options.series[i].data = result.series[i].data;//将值填充到折线图或者柱状图中
				} else {//各种饼形图
					var arr = [];
					$.map(result.series[i].dataPie, function(value, key) {//遍历要展示的Map数据
						arr.push({//将数据存储为符合echarts饼形图规定的格式
							'value' : value,
							'name' : key
						});
					});
					options.series[i].data = arr;//将值填充到饼形图中
				}
			});
			myChart.hideLoading();//隐藏加载
			myChart.setOption(options);//重置myChart的数据
		}
	}, "json" // 返回数据形式为json
	);
}
